<template>
  <view class="information">
    <view class="optionList">
      <view class="optionItem">
        <text class="optionTitle">请上传应用视频</text>
        <toolsFile
          fileMediatype="video"
          :fileList="video_url"
          :max="1"
          @success="(e) => fileSuccess('video_url', e)"
          @remove="(i) => video_url.splice(i, 1)"
        ></toolsFile>
      </view>
      <view class="optionItem">
        <text class="optionTitle">请上传应用使用图片</text>
        <toolsFile
          :fileList="pic_url"
          :max="5"
          @success="(e) => fileSuccess('pic_url', e)"
          @remove="(i) => pic_url.splice(i, 1)"
        ></toolsFile>
      </view>
      <view class="optionItem">
        <view class="optionTitles">
          <text class="optionTitle">最大峰值</text>
          <tip
            content="接入后一年内预计接口秒级调用量峰值是多少？（最高峰值：1000QPS）(示例值:预计接口秒级调用量峰值：xx QPS)"
          ></tip>
        </view>
        <textarea
          type="text"
          placeholder="接入后一年内预计接口秒级调用量峰值是多少"
          v-model="form.qps_answer"
          :disabled="status == 1"
        ></textarea>
      </view>
      <view class="optionItem">
        <view class="optionTitles">
          <text class="optionTitle">处理舆情数量</text>
          <tip
            content="贵公司是否有自己的客服渠道，能及时响应和处理舆情数量是多少？(示例值:有自己的客服团队xx人，能够及时响应并处理舆能力)"
          ></tip>
        </view>
        <textarea
          type="text"
          placeholder=" 贵公司是否有自己的客服渠道，能及时响应和处理舆情数量是多少？"
          v-model="form.customer_answer"
          :disabled="status == 1"
        ></textarea>
      </view>
      <view class="optionItem">
        <view class="optionTitles">
          <text class="optionTitle">备注</text>
          <tip content="获取xx的用途：（1）xxxx（2）xxxx"></tip>
        </view>
        <input
          type="text"
          placeholder="备注"
          v-model="form.memo"
          :disabled="status == 1"
        />
      </view>
      <view class="optionItem">
        <text class="optionTitle">场景分类</text>
        <picker
          mode="selector"
          :range="field"
          :value="index"
          range-key="scene_desc"
          @change="bindPickerChange"
        >
          <view class="uni-input">{{ field[index]["scene_desc"] }}</view>
        </picker>
      </view>
    </view>
    <view class="footer">
      <u-button
        @click="submitBtn"
        :custom-style="{ width: '600rpx', height: '80rpx' }"
        type="error"
        shape="circle"
        :disabled="status == 1"
        >{{ btnText }}</u-button
      >
    </view>
  </view>
</template>

<script>
import http from "@/common/http.js";
import toolsFile from "@/components/tools/tools-file";
import tip from "./tip.vue";
export default {
  components: {
    toolsFile,
    tip
  },
  props: {
    bind_store_id: {
      type: [String, Number],
      default: ""
    },
    mini_id: {
      type: [String, Number],
      default: ""
    },
    status: {
      type: [String, Number],
      default: ""
    },
    field: {
      type: [Object, Array],
      default: () => {
        return {};
      }
    },
    info: {
      type: [Object, Array],
      default: () => {
        return {};
      }
    },
    progress: {
      type: [String, Number],
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      // 表单信息
      form: {
        scene_code: 0, //场景值
        picture: [], //应用图片
        qps_answer: "", //接入后一年内预计接口秒级调用量峰值是多少？（最高峰值：1000QPS）
        customer_answer: "", // 贵公司是否有自己的客服渠道，能及时响应和处理舆情数量是多少？
        memo: "", //备注
        video: "" // 视频
      },
      // 显示分类的选择列表
      showCats: false,
      index: 0,
      video_url: [],
      pic_url: []
    };
  },
  computed: {
    btnText() {
      if (this.progress == 4) {
        if (this.status == 1) {
          return "申请中";
        }
        return "申请接入手机号";
      }
    }
  },
  methods: {
    //按钮
    submitBtn() {
      if (this.status != 1) {
        this.ApplyPhone();
      }
    },
    remove() {
      // 移除后控制台报错 暂时找不到原因
      this.video_url = [];
      this.form.video = "";
    },
    fileSuccess(e, val) {
      if (e === "video_url") {
        this.form.video = val;
        this.video_url.push({
          url: val
        });
      } else {
        this.pic_url.push({
          url: val
        });
        this.form.picture.push(val);
      }
    },
    bindPickerChange(e) {
      let index = e.detail.value;
      this.index = index;
      this.form.scene_code = this.field[index]["scene_code"];
    },
    // 点击选择图片
    addPic() {
      if (this.status == 1) {
        return;
      }

      this.$utils.uploadImage(1, (res) => {
        this.form.picture.push(res);
      });
    },

    async ApplyPhone() {
      uni.showLoading({
        title: this.$t("home.loading")
      });
      const res = await this.$allrequest.newStore.ApplyPhone({
        mini_id: this.mini_id,
        mini_info: this.form
      });
      uni.hideLoading();
      uni.showToast({
        title: res.msg,
        icon: "none",
        duration: 1500
      });
      if (res.code == 0) {
        this.$emit("submit");
      }
    }
  },
  created() {
    this.form.scene_code = this.info.scene_code
      ? this.info.scene_code
      : this.field[this.index].scene_code;
    this.form.picture = this.info.picture ? this.info.picture : [];
    this.form.qps_answer = this.info.qps_answer ? this.info.qps_answer : "";
    this.form.customer_answer = this.info.customer_answer
      ? this.info.customer_answer
      : "";
    this.form.memo = this.info.memo ? this.info.memo : "";
    this.form.video = this.info.video ? this.info.video : "";

    //初始化 视频
    this.video_url = this.info.video ? [{ url: this.info.video }] : [];

    //初始化 图片
    if (this.info.picture) {
      for (let i of this.info.picture) {
        this.pic_url.push({
          url: i
        });
      }
    }
    //初始化 场景值
    if (this.info.scene_code) {
      let field = this.field;
      for (let i in field) {
        if (field[i]["scene_code"] == this.info.scene_code) {
          this.index = i;
        }
      }
    }

    let status = this.status;
    if (status == 1) {
      this.$emit("showTitle", 1);
    }
    if (status == 2) {
      this.$emit("showTitle", 2);
    }
  }
};
</script>

<style lang="scss" scoped>
.information {
  .optionList {
    padding-left: 24rpx;
    background-color: #fff;
    .optionItem {
      padding-top: 30rpx;
      padding-bottom: 30rpx;
      border-bottom: 1px solid #f8f8f8;
      display: flex;
      flex-direction: column;
      font-size: 24rpx;
      padding-right: 30rpx;
      .optionTitles {
        display: flex;
        align-items: flex-start;
        .optionTitle {
          margin-bottom: 24rpx;
        }
      }
      .optionChoose {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      .chooseType {
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #8c8c8c;
        font-size: 24rpx;
        height: 80rpx;
        .iconfont {
          font-size: 24rpx;
          color: #888;
        }
      }
      input {
        width: 100%;
      }
      .tip {
        font-size: 24rpx;
        color: #8c8c8c;
        margin-top: 24rpx;
        display: flex;
        flex-direction: column;
      }
      .sceneList {
        display: flex;
        flex-wrap: wrap;
        text {
          height: 60rpx;
          line-height: 60rpx;
          padding: 0 24rpx;
          background-color: #f2f2f2;
          border-radius: 30rpx;
          font-size: 24rpx;
          color: #8c8c8c;
          margin-right: 24rpx;
          margin-bottom: 24rpx;
          font-weight: 600;
        }
        .current {
          border: 1px solid #f60313;
          background-color: #fbeceb;
          color: #f0250e;
        }
      }
      .addPic {
        width: 160rpx;
        height: 160rpx;
        border-radius: 10rpx;
        background-color: #f6f6f6;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        font-size: 24rpx;
        color: #8c8c8c;
        .iconfont {
          font-size: 56rpx;
          margin-bottom: 12rpx;
        }
        image {
          width: 100%;
          height: 100%;
        }
      }
      .picture_list {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        .addPic {
          width: 160rpx;
          height: 160rpx;
          border-radius: 10rpx;
          background-color: #f6f6f6;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          font-size: 24rpx;
          color: #8c8c8c;
          .iconfont {
            font-size: 56rpx;
            margin-bottom: 12rpx;
          }
          image {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
    .optionItem:last-child {
      border-bottom: none;
    }
  }
  .footer {
    display: flex;
    padding-top: 10rpx;
    justify-content: center;
    border-top: 1px solid #f8f8f8;
    padding-bottom: 10rpx;
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10rpx);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10rpx);
    .btn {
      width: 80%;
      height: 80rpx;
      border-radius: 999px;
      background-color: #f0250e;
      color: #fff;
      font-size: 32rpx;
      font-weight: 600;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
